<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" center width="960px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-upload class="upload-demo" :action="fileaction" :headers="headers" :data="fileData" :limit="1"
        :on-success="handleFileChange" :show-file-list="true" :file-list="fileList">
        <el-button type="primary" size="small" style="margin-bottom: 20px">导入</el-button>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
      <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="卡功能" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="cardFunctionOptions" :value="scope.row.functionType" />
          </template>
        </el-table-column>
        <el-table-column label="发行方" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
        <el-table-column label="售价" align="center" prop="price" :show-overflow-tooltip="true" />
        <el-table-column label="发行数量" align="center" prop="issueTotal" :show-overflow-tooltip="true" />
        <el-table-column label="NFR算力" align="center" prop="hashRate" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="deleteView(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="submitForm" :disabled="disabled">保存</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
      <!-- 导入失败弹窗 -->
      <el-dialog title="导入失败" :visible.sync="dialogVisible" width="500" append-to-body>
        <div>{{importMessage}}</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import {
    equityCardSaveImport,
  } from "@/api/equityManager/equityCard";

  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '280px',
        loading: false,
        id: '', //
        cardFunctionOptions: [], //卡功能数组
        saveLoading: false,
        // 是否禁用
        disabled: true,
        dialogVisible: false, //失败弹窗
        // 弹出层标题
        title: "批量铸造权益卡",
        // 是否显示弹出层
        visible: false,
        fileData: {},
        tabelList: [],
        fileList: [],
        fileaction: process.env.VUE_APP_BASE_API + "/equityManager/equityCard/import",
        headers: {
          "X-Access-Token": getToken(),
        }, //设置上传文件请求头
        importMessage: '', //错误提示
      };
    },
    created() {
      this.getCardDict()
    },
    methods: {
      /** 打开发行管理弹框 */
      open(id, equityIssueId) {
        this.visible = true
        this.fileList = []
        this.tabelList = []
        // this.fileData.id = id
        // this.fileData.id = '1583018620995506178'
      },
      // 取消按钮
      cancel() {
        this.visible = false;
      },
      //获取卡功能字典
      getCardDict() {
        var dictType = "equity_function_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.cardFunctionOptions = res.result[0].dictList;
          })
          .finally(() => {

          });
      },
      //导入文件
      handleFileChange(res, file) {
        console.log('文件', res, file)
        if (res.code == 200) {
          this.$message.success('导入成功');
          this.tabelList = res.result
          this.disabled = false
        } else {
          // this.$message.error(res.message);
          // this.$message.error('导入失败')
          this.importMessage = res.message
          this.dialogVisible = true
          setTimeout(() => {
            this.fileList = []
          }, 800)
        }
      },
      /** 删除提交按钮deleteWhite */
      deleteView(row) {
        let index = row.$index
        this.tabelList.splice(index, 1)
        // console.log(this.tabelList)
        if (this.tabelList.length == 0) {
          this.fileList = []
          this.disabled = true
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.saveLoading = true
        equityCardSaveImport(this.tabelList).then(response => {
          this.$message.success('保存成功');
          this.cancel();
          this.$emit('refresh')
          setTimeout(()=>{
            this.saveLoading = false
          },1000)
        }).catch(() => {
          this.saveLoading = false
        })
      },
      /** 序号 */
      rowIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
    }
  };

</script>
<style scoped>
  .img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
  }

  .flex {
    display: flex;
    align-items: center;
  }

</style>
